<template id="f7-viewbar-instince">
  <f7-viewbar
    slot="fixed"
    class="viewbar_bottom"
  >
    <f7-link
      v-for="(item,i) in links"
      :key="i"
      :icon-f7="item.icon"
      :text="item.text"
      href="#"
      @click="link(item.href)"
      :tab-link-active="item.tabLinkActive"
    ></f7-link>
  </f7-viewbar>
</template>
<script>
export default {
  data() {
    return {
      links: [
        {
          text: "聊天",
          icon: "chat_bubble",
          class: "indexIcon",
          href: "/im/index/",
          tabLinkActive: true
        },
        {
          text: "群",
          icon: "person_2",
          class: "msgIcon",
          href: "/im/contact/",
          tabLinkActive: false
        },
        {
          text: "我的",
          icon: "person_circle",
          class: "settingIcon",
          href: "/im/me/",
          tabLinkActive: false
        }
      ]
    };
  },
  methods: {
    fillUrl(url) {
      let r = url;
      if (!this.$util.startsWith(r, "/")) {
        r = "/" + r;
      }
      if (!this.$util.endsWith(r, "/")) {
        r = r + "/";
      }
      return r;
    },
    link(url) {
      this.$f7.views.current.router.navigate(url, { animate: false });
    }
  },
  mounted() {
    var url = this.$f7route.url;
    this.$util.each(this.links, c => {
      c.tabLinkActive = this.fillUrl(c.href) == this.fillUrl(url);
    });
  }
};
</script>
<style scoped>
</style>
